<template>
    <div class="app-container">
      
      <!-- :inline="true"表示行内表单 -->
      <el-form :inline="true" class="demo-form-inline">
        <el-form-item>
          <!-- v-model为什么绑定叫hosname和hoscode的属性，因为后端由@RequestBody修饰的实体类HospitalSetQueryVo正好就是这两个属性，名字必须和
          HospitalSetQueryVo的属性名保持一致，这样才能把前端传的数据绑定到HospitalSetQueryVo实体中 -->
          <el-input v-model="searchObj.cname" placeholder="竞赛名称"/>
        </el-form-item>
        
        <el-button type="primary" icon="el-icon-search" @click="fetchData()">查询</el-button>
  
    
        
        
      </el-form>
  
      
  
      <!-- banner列表 -->
      <el-table :data="list" stripe style="width: 100%">
        <!-- <el-table-column type="index" width="50"/> -->
        <el-table-column prop="id" label="竞赛编号"/>
        <el-table-column prop="cname" label="竞赛名称"/>
        <el-table-column prop="year" label="年度" width="200"/>
        <el-table-column prop="content" label="竞赛内容"/>
        <el-table-column prop="date" label="竞赛日期"/>
        <el-table-column prop="norm" label="竞赛规范"/>
        
        <!-- 操作栏 -->
        <el-table-column label="操作" width="280" align="center">
          <!-- slot-scope="scope"表示当前行所在的域 -->
          <template slot-scope="scope">
  
            <!-- scope.row表示当前行这个对象  scope.row.id表示当前行的id,但是list里边的每一个对象只有cid，没有id，所以这里要用scope.row.cid
            才能把cid传到后端-->
            <!-- 删除按钮 -->
            
            &nbsp;
            <!-- 路由跳转(编辑按钮)当被点击后，内部会立刻把 to 的值传到 router.push() -->
            <router-link :to="'/student/comDetail/'+scope.row.id">
              <el-button type="primary" size="mini" icon="el-icon-edit">查看详情</el-button>
            </router-link>
            &nbsp;
  
          </template>
        </el-table-column>
  
  
  
      </el-table>
  
      <!-- 分页 -->
      <!--:current-page是当前页，改成current,前边有冒号，是v-bind，所以冒号里写js表达式  -->
      <!-- @current-change是element-ui的一个事件，切换分页的时候触发 -->
      <el-pagination
        :current-page="current"  
        :page-size="limit"
        :total="total"
        style="padding: 30px 0; text-align: center;"
        layout="total, prev, pager, next, jumper"
        @current-change="fetchData"
      />
  
    </div>
  </template>
  
  <script>
  //前后端交互：在vue文件中导入hospitalset.js，这些js文件里写了和后端接口交互的函数，调用这些函数，就能实现前后端数据交互
  //记住：前后端交互是靠写的js文件里的函数，而跟router/index.js里配的路由没一点关系，路由只负责前端点哪个按钮跳到哪个组件而已
  import admin from '@/api/admin' 
  export default {
      data() {
          return {
            current:1, //当前页
            limit:5,   //每页显示记录数
            searchObj:{},//条件封装对象
            list:[],//当前页的数据集合  
            total:0 //总记录数
          }
      },
      created(){
        //获取数据
        this.fetchData()
      },
      //无分页
      // methods:{
      //   fetchData(){//axios已经在utils/request.js里封装好了，然后hospitalset.js引入request.js，这里又引入hospitalset.js，所以这里不用写axios了
      //     hospSet.getList().then(Response=>{
      //       //Response：被axios响应拦截器处理后的结果，是Result对象
      //       //console.log(Response);
      //       this.list=Response.data
      //     })
      //   }
      // }
      
      //带分页
      methods:{
        fetchData(current=1){//上边created钩子调fetchData函数如果没有传参数就默认current为1,若传了2，那就是this.curremt=2,1就没用了
          this.current=current;
          admin.getPageList(this.current,this.limit,this.searchObj).then(response=>{
            //Response：被axios响应拦截器处理后的结果，是Result对象,并不是原始的response，而是原始的response中的data，即Result对象
            //console.log(response);  
            // response.data是Result对象的data属性，这个data是后端自己定义的，它就是Page对象
            this.list=response.data.records;//records是IPage里的
            this.total=response.data.total;
            console.log(response)
            
          })
        },
  
        //删除
        removeDataById(id){
          this.$confirm('此操作将删除客户信息,是否继续?','提示',{
            confirmButtonText:'确定',
            cancelButtonText:'取消',
            type:'warning'
          }).then(()=>{
            //确定后执行then方法
            admin.deleteCom(id).then(response=>{
            //提示
            this.$message({
              type:'success',
              message:'删除成功！'
            })
            //刷新页面(再次调用查询列表带分页的接口)
            this.fetchData()
          })
          });
          
        },
      }
  }
  </script>
  
  <style>
  
  </style>